<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="description" content="Responsive Admin Template"/>
    <meta name="author" content="SmartUniversity"/>
    <title>Spice Hotel | Bootstrap 4 Admin Dashboard Template + UI Kit</title>
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css"/>
    <!-- icons -->
    <link th:href="@{/assets/plugins/simple-line-icons/simple-line-icons.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <!--bootstrap -->
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <!-- Material Design Lite CSS -->
    <link rel="stylesheet" th:href="@{/assets/plugins/material/material.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/material_style.css}">
    <!-- animation -->
    <link th:href="@{/assets/css/pages/animate_page.css}" rel="stylesheet">
    <!-- Template Styles -->
    <link th:href="@{/assets/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/plugins.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/responsive.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/theme-color.css}" rel="stylesheet" type="text/css"/>
    <!-- dropzone -->
    <link th:href="@{/assets/plugins/dropzone/dropzone.css}" rel="stylesheet" media="screen">
    <!-- Date Time item CSS -->
    <link rel="stylesheet" th:href="@{/assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.css}"/>
    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}"/>
</head>
<!-- END HEAD -->
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md header-white dark-sidebar-color logo-dark">
<div class="page-wrapper">
    <!-- start header -->
    <div th:replace="~{commons::headnavbar}"></div>
    <!-- end header -->

    <!-- start page container -->
    <div class="page-container">
        <!-- start sidebar menu -->
        <div th:replace="~{commons::sidebar(active='add_room',open='room')}"></div>
        <!-- end sidebar menu -->
        <!-- start page content -->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="page-bar">
                    <div class="page-title-breadcrumb">
                        <div class=" pull-left">
                            <div class="page-title">Add Room Details</div>
                        </div>
                        <ol class="breadcrumb page-breadcrumb pull-right">
                            <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" th:href="@{/index.html}">Home</a>&nbsp;<i
                                    class="fa fa-angle-right"></i>
                            </li>
                            <li><a class="parent-item" href="">Rooms</a>&nbsp;<i class="fa fa-angle-right"></i>
                            </li>
                            <li class="active">Add Room Details</li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card-box">

                            <div class="card-head">
                                <header>Add Room Details</header>
                            </div>

                            <form class="card-body row" th:action="@{/room}" method="post">
<!--                                <div class="col-lg-6 p-t-20">-->
<!--                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield&#45;&#45;floating-label txt-full-width">-->
<!--                                        <input class="mdl-textfield__input" type="text" id="txtRoomNo" name="rid">-->
<!--                                        <label class="mdl-textfield__label">Room Number</label>-->
<!--                                    </div>-->
<!--                                </div>-->

                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height txt-full-width">
                                        <input class="mdl-textfield__input" type="text" id="list3" name="roomtype" value="" readonly
                                               tabIndex="-1">
                                        <label for="list3" class="pull-right margin-0">
                                            <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
                                        </label>
                                        <label for="list3" class="mdl-textfield__label">Room Type</label>
                                        <ul data-mdl-for="list3" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
                                            <li class="mdl-menu__item" data-val="1">商务单间</li>
                                            <li class="mdl-menu__item" data-val="2">高级大床房</li>
                                            <li class="mdl-menu__item" data-val="3">豪华双人房</li>
                                            <li class="mdl-menu__item" data-val="4">至尊套房</li>
                                            <li class="mdl-menu__item" data-val="5">总统套房</li>
                                            <li class="mdl-menu__item" data-val="6">情侣圆床房</li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height txt-full-width">
                                        <input class="mdl-textfield__input" type="text" id="sample2" name="status" value="" readonly
                                               tabIndex="-1">
                                        <label for="sample2" class="pull-right margin-0">
                                            <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
                                        </label>
                                        <label for="sample2" class="mdl-textfield__label">status</label>
                                        <ul data-mdl-for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
                                            <li class="mdl-menu__item" data-val="1">0 </li>
                                            <li class="mdl-menu__item" data-val="2">1</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height txt-full-width">
                                        <input class="mdl-textfield__input" type="text" id="sample3" name="food" value="" readonly
                                               tabIndex="-1">
                                        <label for="sample3" class="pull-right margin-0">
                                            <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
                                        </label>
                                        <label for="sample2" class="mdl-textfield__label">Meal</label>
                                        <ul data-mdl-for="sample3" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
                                            <li class="mdl-menu__item" data-val="1">无早餐</li>
                                            <li class="mdl-menu__item" data-val="2">有早餐</li>
                                            <li class="mdl-menu__item" data-val="3">早晚餐</li>
                                            <li class="mdl-menu__item" data-val="4">全部加免费酒水</li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height txt-full-width">
                                        <input class="mdl-textfield__input" type="text" id="list2" name="capacity" value="" readonly
                                               tabIndex="-1">
                                        <label for="list2" class="pull-right margin-0">
                                            <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
                                        </label>
                                        <label for="list2" class="mdl-textfield__label">Capacity</label>
                                        <ul data-mdl-for="list2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
                                            <li class="mdl-menu__item" data-val="1">1</li>
                                            <li class="mdl-menu__item" data-val="2">2</li>
                                            <li class="mdl-menu__item" data-val="3">4</li>
                                            <li class="mdl-menu__item" data-val="4">6</li>
                                            <li class="mdl-menu__item" data-val="5">8</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="text" name="size" id="text8">
                                        <label class="mdl-textfield__label" for="text8">size</label>
                                        <span class="mdl-textfield__error">Number required!</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 p-t-20">
                                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
                                        <input class="mdl-textfield__input" type="text"  name="price" value="" id="text7">
                                        <label class="mdl-textfield__label" for="text7">Rent Per Night</label>
                                        <span class="mdl-textfield__error">Number required!</span>
                                    </div>
                                </div>
                                <!--<div class="col-lg-12 p-t-20">-->
                                    <!--<label class="control-label col-md-3">Upload Room Photos</label>-->
                                    <!--<form id="id_dropzone" class="dropzone">-->
                                        <!--<div class="dz-message">-->
                                            <!--<div class="dropIcon">-->
                                                <!--<i class="material-icons">cloud_upload</i>-->
                                            <!--</div>-->
                                            <!--<h3>Drop files here or click to upload.</h3>-->
                                            <!--<em>(This is just a demo. Selected files are <strong>not</strong>-->
                                                <!--actually uploaded.)-->
                                            <!--</em>-->
                                        <!--</div>-->
                                    <!--</form>-->
                                <!--</div>-->
                                <!--<div class="col-lg-12 p-t-20">-->
                                    <!--<div class="mdl-textfield mdl-js-textfield txt-full-width">-->
					                     <!--<textarea class="mdl-textfield__input" rows="4"-->
                                                   <!--id="education"></textarea>-->
                                        <!--<label class="mdl-textfield__label" for="text7">Room Details</label>-->
                                    <!--</div>-->
                                <!--</div>-->
                                <div class="col-lg-12 p-t-20 text-center">
                                    <button type="submit"
                                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 m-r-20 btn-pink">
                                        Submit
                                    </button>
                                    <button type="reset"
                                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-default">
                                        Cancel
                                    </button>
                                </div>
                                <div class="col-lg-12 p-t-20 text-center" >
                                    <input  th:value="${failadd}" th:if="${failadd!=null}"></input>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page content -->
        <!-- start chat sidebar -->
        <div th:replace="~{commons::settingtools}"></div>
        <!-- end chat sidebar -->
    </div>
    <!-- end page container -->
    <!-- start footer -->
    <div th:replace="~{commons::footer}"></div>
    <!-- end footer -->
</div>
<!-- start js include path -->
<script th:src="@{/assets/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/assets/plugins/popper/popper.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-blockui/jquery.blockui.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- bootstrap -->
<script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- Common js-->
<script th:src="@{/assets/js/app.js}"></script>
<script th:src="@{/assets/js/layout.js}"></script>
<script th:src="@{/assets/js/theme-color.js}"></script>
<!-- Material -->
<script th:src="@{/assets/plugins/material/material.min.js}"></script>
<script th:src="@{/assets/js/pages/material_select/getmdl-select.js}"></script>
<script th:src="@{/assets/plugins/material-datetimepicker/moment-with-locales.min.js}"></script>
<script th:src="@{/assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.js}"></script>
<script th:src="@{/assets/plugins/material-datetimepicker/datetimepicker.js}"></script>
<!-- dropzone -->
<script th:src="@{/assets/plugins/dropzone/dropzone.js}"></script>
<script th:src="@{/assets/plugins/dropzone/dropzone-call.js}"></script>
<!-- animation -->
<script th:src="@{/assets/js/pages/ui/animations.js}"></script>
<!-- end js include path -->
</body>
</html>